<template>
  <!--延迟保障-->
  <div>
    <swiper :imgList="imgList"></swiper>
    <p class="title">{{goods.goodsName}}
      <span><span v-if="isOld">{{goods.vipPrice}}元</span><span v-else>{{goods.goodsPrice}}元</span>

        /人次</span>
    </p>
    <ul>
      <span v-html="config.content"></span>
    </ul>
    <p class="offer" @click="goBuy(goods.goodsId)">立即购买</p>
  </div>
</template>

<script type="text/ecmascript-6">
  import {delaybaozhang} from '../../../test/unit/http'
  import swiper from '../offertemplate/imgswipertemplate'
  export default {
    name: 'delaybaozhang',
    props: {},
    data() {
      return {
        imgList: [],
        config: {},
        goods:{},
        isOld:false
      };
    },
    methods: {
      goBuy(goodsId){
        this.$router.push({ path: '/baozhangdetail',query:{goodsId:goodsId}})
      },
      getDelaybaozhangData(params){
        let that =this;
        delaybaozhang(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            that.config = res.object.config;
            that.goods = res.object.goods;
            that.isOld = res.object.isOld;
            let configImg=res.object.config.configImg;
            let isEmpty = this.$myUtils.isNull(configImg);
            if (!isEmpty) {
              that.imgList = configImg.split(",");
            }
          }
        })
      }
    },
    created() {
      this.getDelaybaozhangData({});
    },
    components: {
      swiper
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .title {
    font-size: 16px;
    color: #666;
    margin: 10px;
    border-bottom: 1px solid #eee;
    text-align: left;
    padding: 10px 10px 20px;
    > span {
      float: right;
      font-size: 15px;
      span {
        color: #fe8751;
        font-size: 20px;
        font-weight: 700;
      }
    }
  }

  ul {
    padding: 10px 10px 60px;
    text-align: left;
    margin-bottom: 50px;
    li:first-child {
      font-size: 20px;
      color: #111;
      font-weight: 700;
    }
    li:nth-child(2) {
      line-height: 25px;
      font-size: 15px;
      color: #666;
      margin: 10px 0;
    }
  }

  .offer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-image: linear-gradient(to right, #f9964e, #ff8551);
    height: 50px;
    line-height: 50px;
    color: #fff;
  }
</style>
